<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <van-search v-model="query"></van-search>
    </div>
</body>
<script src="./vue.global.js"></script>
<script>

    // 在自定义组件上， 使用 v-model
    //组件上默认的属性： modelValue
    //组件上默认的事件: update:modelValue

    //定义组件
    const VanSearch ={
        props:["modelValue"],
        emits:["update:modelValue"],
        template:`
            <div>
                <p>{{modelValue}}</p>
              
                <input type="text" v-bind:value="modelValue" @input="change" />
                
            </div>


        `,
        methods:{
            change(e){
                this.$emit("update:modelValue",e.target.value); 
            }
        }
    }

    const app = Vue.createApp({
        data(){
            return{
                query:"hello",
            }
        },
        components:{VanSearch},
    })
    app.mount("#app")
</script>
</html>